iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
1
Modern Web

Fabricjs 筆記系列 第 6

Day 6 - Fabricjs Filters 圖片濾鏡

  • 分享至 

  • xImage
  •  

前幾天已經練習了怎麼樣使用 fabric.Image 新增圖片了,今天讓我們再來為我們圖片添加更豐富的變化!

fabricjs 能為圖片渲染出更豐富的濾鏡效果,讓平淡的圖片產生更多更酷炫的效果

舉凡如下:

  • 顏色的偏差調整
  • 調整色彩亮度和對比
  • 負片、灰階、雜訊等效果
  • 去除背景
  • 內建其它網美愛用濾鏡 (?)

圖片濾鏡效果

Fabric 擁有強大的濾鏡 api,且還能夠支援 WebGL 來使用 GPU 資源

甚至還能夠建立自己的濾鏡效果呢!

fabric.Image.filters (Array)

最簡單的使用方法就是修改 fabric.Image 中的 filters 屬性,這是一個陣列,這個陣列裡面存放 Fabric 的 filter 物件實例,所以說這些效果還是能疊加的,只要我們把濾鏡效果都裝進這個陣列裏頭!

這邊就簡單的創建幾種濾鏡來玩看看效果吧!

灰階效果

// 圖片
const imgEl = document.createElement('img')
imgEl.crossOrigin = 'Anonymous' // 讓圖片能讓所有人存取
imgEl.src = 'https://i.imgur.com/1k9XjUn.jpg'
imgEl.onload = () => {
  const image = new fabric.Image(imgEl, {
    scaleX: 0.5,
    scaleY: 0.5,
    angle: 15,
    top: 60,
    left: 300
  })
  // 將 filters 實例 push 進 filters 裏頭
  image.filters.push(new fabric.Image.filters.Grayscale())
  // 這邊需要重整所有的濾鏡效果
  image.applyFilters()
  canvas.add(image)
}


我們就很輕鬆地幫照片加上灰階效果囉!

負片效果

image.filters.push(new fabric.Image.filters.Invert())

純黑白

image.filters.push(new fabric.Image.filters.BlackWhite()) // 純黑白

復古

  image.filters.push(new fabric.Image.filters.Sepia()) // 復古

混和風格 純黑白 + 復古

  image.filters.push(new fabric.Image.filters.BlackWhite()) // 純黑白
  image.filters.push(new fabric.Image.filters.Sepia()) // 復古

模糊

需要傳入物件提供 blur 數值

  image.filters.push(new fabric.Image.filters.Blur({
    blur: 0.5
  })) // 模糊

去背

去背需要提供色彩以及範圍

  image.filters.push(new fabric.Image.filters.RemoveColor({
  distance: 0.2,
  color: 'white'
})) // 去背

可不只這些呦

Fabric 其實還提供了更多更有趣的內建濾鏡讓大家去使用,如果還有興趣可以到

fabricjs filter demo - http://fabricjs.com/image-filters
fabric doc filters - http://fabricjs.com/docs/fabric.Image.filters.html
去玩更多濾鏡效果呦

最後分享這邊踩到的一些雷

cross-origin data

這邊原本是想偷懶直接用 fabric.Image.FromURL 去直接使用 URL 建立一張圖片的

// 使用 url 繪製圖片
fabric.Image.fromURL('https://i.imgur.com/1k9XjUn.jpg', (img) => {
  const oImg = img.set({
      left: 300,
      top: 100,
      angle: 15,
      width: 500,
      height: 500
  })
  oImg.filters.push(new fabric.Image.filters.Grayscale())
  oImg.applyFilters()
  canvas.add(oImg) // 記得還是要加進 canvas 才會顯示出來呦
})

這邊可以看到因為我們直接用 URL 去做載入圖片,這邊 fabric 底層應該是沒有建立 標籤來儲存圖片,所以有同源的限制,這邊解法是用另一種圖片載入的方法

請參考 MDN - 同源政策 https://developer.mozilla.org/zh-TW/docs/Web/Security/Same-origin_policy

影像濾鏡出來不完整

原因是一開始使用解析度過大圖像 (3024*4032) ... 超大


這邊是 Fabricjs 為了防止用戶因使用過大的圖片而造成無法處理所做的限制
可以透過操作 fabric.textureSize 去操控被限制的大小
不過我這邊是自己去把圖片解析度縮小了啦...

今日小結

今天練習 Fabric 強大的 filters 濾鏡系統,似乎在 2.0 之後的版本又添加了 WebGL 來使用 GPU 資源真是大大提升了處理圖片的效能!

其它參考資料
fabricjs filters overview - http://fabricjs.com/fabric-filters
圖片來源
帶我們家小狗衛武營拍的XD

今日 codepen https://codepen.io/nono1526/pen/Bqxgrv?editors=1010


上一篇
Day 5 - Fabricjs 物件的繼承關係以及物件控制
下一篇
Day 7 - 文字效果
系列文
Fabricjs 筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言